
<html>
<head>
    <meta charset="utf-8">
    <title>电话</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<html>
<head>
    <style type="text/css">
        body{margin:0;padding:0;}
        .grid_wrapper{
            width: 190px;
            height: 190px;
            margin-left: auto;
            margin-right: auto;
        }
        .grid{
            margin-left: 5px;
            margin-top: 5px;
        }
        .grid:after{
            content: ".";
            display: block;
            line-height: 0;
            height: 0;
            clear: both;
            visibility: hidden;
            overflow: hidden;
        }
        .grid a,.grid a:visited{
            float: left;
            display: inline;
            border: 5px solid #ccc;
            width: 60px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin-left: -5px;
            margin-top: -5px;
            position: relative;
            z-index: 1;
        }
        .grid a:hover{
            border-color: #f00;
            z-index: 2;
        }
    </style>
</head>
<body>
<div class="grid_wrapper">
    <input type="text" style="width: 198px;height: 40px;border-radius: 5px" id="tel" value="${tel}"/>
    <div class="grid" style="width: 200px">
        <a href="javascript:void(0);" title="1" onclick="dotel(this)">1</a>
        <a href="javascript:void(0);" title="2" onclick="dotel(this)">2</a>
        <a href="javascript:void(0);" title="3" onclick="dotel(this)">3</a>
        <a href="javascript:void(0);" title="4" onclick="dotel(this)">4</a>
        <a href="javascript:void(0);" title="5" onclick="dotel(this)">5</a>
        <a href="javascript:void(0);" title="6" onclick="dotel(this)">6</a>
        <a href="javascript:void(0);" title="7" onclick="dotel(this)">7</a>
        <a href="javascript:void(0);" title="8" onclick="dotel(this)">8</a>
        <a href="javascript:void(0);" title="9" onclick="dotel(this)">9</a>
        <a href="javascript:void(0);" title="*" onclick="dotel(this)">*</a>
        <a href="javascript:void(0);" title="0" onclick="dotel(this)">0</a>
        <a href="javascript:void(0);" title="#" onclick="dotel(this)">#</a>
        <button style="width: 92px;height: 40px;background: #00CD66;color: white" icon="fa-search" onclick="telTo()">拨通</button>
        <button style="width: 92px;height: 40px;background: red;color: white" icon="fa-search" onclick="telDel()">删除</button>
    </div>

</div>
<script type="text/javascript">
    function dotel(event){
        document.getElementById("tel").value = document.getElementById("tel").value+event.text;
    }
    function telDel(){
        var telNum = document.getElementById("tel").value;
        document.getElementById("tel").value = telNum.substr(0, telNum.length - 1);
    }
    function telTo(){
        Feng.info("电话拨通中。。。。");
    }
</script>
<script src="${ctxPath}/static/js/common/Feng.js"></script>
</body>
</html>